import React from 'react';
import {connect} from 'dva';
import Chart from '../components/Chart';
import styles from '../styles/styles.less';
import ItemTable from '../components/ItemTable';
import Menu from '../components/Menu';
import PieChart from '../components/PieChart';
import Layout from '../components/Layout';
import {getCurrentMonth} from '../utils/tools';
import Header from '../components/Header';
import {gotoRouter} from '../utils/common';

function mapState(states)
{
  return {states};
}
export default connect(mapState)(function IncomePage({states,dispatch,location})
{
  const model = 'income';
  const state = states[model];
  let month = getCurrentMonth();
  let data = {
    month,
    items:[]
  };
  let chartData = [];
  if(state.data.detail)
  {
    for(let i = 0;i < state.data.detail.length;i++)
    {
      let item = {...state.data.detail[i]};
      const split = '-';
      if(item.name.indexOf(split) != -1)
      {
        item.name = item.name.split(split)[1];
      }
      data.items.push({...item});
      chartData.push({...item});
    }
  }
  let date = month.split('-');
  let title = state.loading?'加载中...':'收入分析';
  let itemTitle = state.loading?'加载中...':(date[0]+'年'+date[1]+'月收入(元)');
  function onSelect(month)
  {
    gotoRouter(dispatch,'/'+model);
  }
  return (
    <Layout>
      <Header title={title} onSelect={onSelect} month={month} />
      <PieChart id='incomeChart' data={chartData} title="总收入(元)" />
      <ItemTable data={data} title={itemTitle} />
    </Layout>
  );
});